<template>
  <div class="app-container">
    <div class="backoff">
      <div>
        <!-- <el-button @click="bohui" type="" icon="" class="anniu" v-show="$route.query.state == 1">驳回</el-button> -->
        <el-button class="anniu" @click="$router.go(-1)">返回</el-button>
      </div>
    </div>
    <el-tabs
      v-model="tabValue"
      class="tac"
      tab-position="left"
      @tab-click="checkTabs"
    >
      <el-tab-pane
        style="height: 100%"
        label="现金流量表"
        name="1"
        v-if="$route.query.state == 0 || $route.query.state == 1"
      >
        <div class="box topForms">
          <div class="fromsBox">
            <!-- 现金流量表 -->
            <cash :state="$route.query.state" :cashData="cashData"></cash>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane
        style="height: 100%"
        :state="1"
        name="2"
        label="资产负债表"
        v-if="$route.query.state == 0 || $route.query.state == 2"
      >
        <div class="box topForms">
          <div class="fromsBox">
            <!-- 资金负债表 -->
            <liability
              :liabilityData="liabilityData"
              :state="$route.query.state"
            ></liability>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane
        style="height: 100%"
        :state="3"
        name="3"
        label="利润表"
        v-if="$route.query.state == 0 || $route.query.state == 3"
      >
        <div class="box topForms">
          <div class="fromsBox">
            <!--利润表  -->
            <profits
              :profitsData="profitsData"
              :state="$route.query.state"
            ></profits>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import cash from "./cash.vue"; //现金流量表
import liability from "./liability.vue"; //资金负债表
import profits from "./profits.vue"; //利润表
import axios from "axios";
import { Loading } from "element-ui";
// import { bhdetail } from "@/api/information.js";

import { queryReport, addReport, getReportDetail } from "@/api/shenji";

export default {
  components: {
    cash,
    liability,
    profits,
  },
  data() {
    return {
      tabValue: "1",
      excelMsg: "",
      reportId: "", // 详情id
      reportType: 1, //（1：现金流量表，2：利润表，3：资产负债表。默认：1）
      excelName: ["现金流量表", "利润表", "资产负债表"],

      cashData: "", // 现金表数据
      profitsData: "", // 利润表数据
      liabilityData: "", // 资产负债表数据
    };
  },
  created() {
    this.getRD(this.$route.query.id);
  },
  watch: {
    currentState(val, old) {
      if (val != 0) {
        this.tabValue = this.currentState;
        console.log("aaa0啊实打实大苏打000", this.tabValue);
      }
    },
  },
  mounted() {
    this.reportId = this.$route.query.id;
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.getRD(to.query.id);
      if (to.query.state != 0) {
        vm.tabValue = to.query.state;
      }
    });
  },
  methods: {
    checkTabs(e) {
      // 切换tabs
      this.reportType = this.currentType(e.label);
      this.getRD(this.$route.query.id);
    },
    currentType(eName) {
      let n;
      this.excelName.forEach((item, index) => {
        if (item == eName) {
          return (n = index + 1);
        }
      });
      return n;
    },
    submitExcel() {
      // addReport({})
      // .then()
      // .catch()
      console.log("cash", this.excelMsg);
    },
    getExcel(data) {
      this.excelMsg = data;
      // console.log("________________",data);
    },

    getRD(data) {
      // 获取详情
      if (this.$route.query.state == 0) {
        getReportDetail(data).then((res) => {
          console.log("详情", res);
          switch (this.reportType) {
            case 1:
              this.cashData = res.data.data.xianjin;
              console.log("2cash", this.cashData);
              break;
            case 2:
              this.profitsData = res.data.data.lirun; // 利润表数据
              console.log("3pro", this.profitsData);
              break;
            case 3:
              this.liabilityData = res.data.data.fuzhai; // 资产负债表数据
              console.log("4lib", this.liabilityData);
              break;
          }
        });
      }
    },
  },
};
</script>
<style scoped lang="scss">
.weidaili_head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search {
  float: right;
  width: 20%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: flex;

  ::v-deep.el-input__inner {
    border: none !important;
  }

  .el-button {
    border: none;
  }
}

::v-deep.el-input__inner {
  border: none !important;
}

.weidaili {
  height: 75vh;
  margin-bottom: 10px;
  overflow: hidden;
}

.block {
  width: 100%;
  // padding-right: 5%;
  display: flex;
  justify-content: flex-end;
  padding-top: 0 !important;
  padding-bottom: 10px;
}

.showphoto {
  height: 553px;
  background: #f5f6fa;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.showphoto1 {
  height: 553px;
  background: #f5f6fa;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-tabs .el-tab-pane {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  // overflow-y: auto;
}

.app-container {
  //   height: calc(100vh + 50px);
  // height: calc(100vh - 130px);
  height: 91%;
  padding-bottom: 0px;
  position: relative;
  // display: flex;
  // flex-direction: column;
  // position: relative;
}

// ::v-deep .el-tabs__content {
//   // height: 100% !important;
// }

.public-ku {
  margin-top: 1.375rem;
  width: 443.8px;
  height: 250px;
  margin-bottom: 1.25rem;
}

.kuang-txt {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
}

.pdf {
  width: 50px;
  height: 50px;
}

.kuang-1 {
  font-size: 1.1625rem;
  line-height: 2.3125rem;
  margin-left: 1.25rem;
  margin-top: 0.375rem;
  font-family: Microsoft YaHei;
  font-weight: 800;
  color: #333333;
}

.fromsBox {
  width: 100%;
  // overflow: auto;
  /* margin: 0px auto; */
  // margin-top: 60px;
  padding: 0 15% 0 20px;
  // padding-bottom: 40px;

  .el-form-item {
    margin-bottom: 4px;
    margin-left: 20px;
  }

  h5 {
    font-size: 16px;
    font-weight: bold;
  }
}

.title {
  font-weight: bold;
  margin-bottom: 10px;
}

.left {
  width: 70%;
  margin: 0px auto;
  margin-top: 60px;
}

.conter {
  margin-left: 20px;
  // width: 85%;
}

.backoff {
  position: absolute;
  z-index: 999;
  left: 222px;
  // top: 83px;
  // margin-left: 180px;
  display: flex;
  justify-content: flex-end;
  padding: 5px 0;
  box-sizing: border-box;

  div {
    width: calc(100vw - 240px);
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
  }

  .el-button {
    border: 1px solid;
  }
}

.rzBox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%);

  .el-button {
    width: 150px !important;
  }
}

.renzhng {
  flex: 1;
  overflow-y: auto;
  padding: 0 10%;

  .el-form-item {
    margin-bottom: 4px;
  }
}

.footer {
  display: flex;
  padding-left: 10px;
  box-sizing: border-box;
  height: 45px;
  // justify-content: center;
  align-items: center;
  background-color: #f4f4f5 !important;

  .btn {
    width: 80px;
    height: 35px;
    border: 1px solid #1795ff;
  }
}

.table {
  margin-top: 10px;
  // margin-left: 34px;
}

.tabBoxs {
  padding-left: 54px;

  h5 {
    margin-left: -34px;
  }
}

.cardBoxs {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-left: 20px;
}

.public-kuang {
  width: 49%;
  margin-top: 8px;
  // margin-left: 34px;
  margin-bottom: 10px;
  //   width: 750px;
  height: 85px;
  padding: 0.5125rem 0.55rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  //   flex-direction: column;
  /* justify-content: space-between; */
  /* align-items: center; */
  background: #ffffff;
  -webkit-box-shadow: 0rem 0rem 0.1875rem 0rem rgb(0 0 0 / 15%);
  box-shadow: 0rem 0rem 0.1875rem 0rem rgb(0 0 0 / 15%);
}

.kuang-txt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 800;
}

.kuang-1 {
  font-size: 1.1625rem;
  line-height: 2.3125rem;
  margin-left: 1.25rem;
  margin-top: 0.375rem;
  font-family: Microsoft YaHei;
  font-weight: 800;
  color: #333333;
}

.kuang-2 {
  width: 4.125rem;
  height: 2.0375rem;
  line-height: 1.375rem;
  text-align: center;
  /* border-radius: 20px; */
  background: #069cff;
  border: 0.0625rem solid #069cff;
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  padding: 0.3125rem 0.5125rem;
  color: #fff;
}

.tac {
  height: 100%;
}

::v-deep .tac .el-tabs__content {
  height: 100%;
  // overflow: auto;
}

.box {
  height: 100%;
  overflow: auto;
}

::v-deep .el-tabs--left .el-tabs__item.is-left {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: end;
  font-size: 18px;
  font-family: MicrosoftYaHei-, MicrosoftYaHei;
  font-weight: normal;
  color: #000000;
}

::v-deep .fromsBox .el-input__inner {
  width: 100% !important;
}

::v-deep .el-tabs--left .el-tabs__item.is-active {
  background: #1795ff;
  color: #fff;
}

::v-deep .el-tabs--left {
  height: 100%;
}

::v-deep .el-tabs__item {
  font-size: 16px;
}

.topForms {
  margin-top: 60px;
}
</style>
